Los menús son una pieza importante en el blog porque nos ayudan a ordenar el contenido, resulta igual de útil un menú creado con scripts y efectos fantásticos que el más sencillo creado con CSS. En la variedad está el gusto y tenemos multitud de páginas para escoger.
Este menú es fino y muy sencillo y añadiendo los colores acordes con el blog el resultado puede ser muy agradable.
Para añadirlo son dos sencillos pasos. Nos situamos en plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos los estilos.
#navigation {
margin-left:100px; /* Margen izquierdo */
top:25px; /* Margen superior */
}
#navigation li {
float:left;
}
#navigation a {
background-color:#000000; /* color de fondo */
border-bottom:3px solid #FFFFFF; /* Línea inferior *
color:#FFFFFF; /* Color de texto */
display:inline-block;
font-size:13px; /* Tamaño de fuente */
font-weight:normal;
margin-right:1px;
padding:10px 20px 10px; /* Anchura y altura de las pestañas */
text-decoration:none;
text-transform:uppercase; /* Letra mayúscula */
text-shadow:0 1px 1px #CDCDCD ;/* Sombra texto */
}
#navigation a:hover {
border-bottom:3px solid #05C7C0; /* Linea inferior al pasar el cursor (hover) */
color:#05C7C0; /* Color al pasar el cursor (hover) */
}
#navigation li.selected a {
border-bottom:3px solid #05C7C0; /* Color linea inferior fija (Home) */
color:#05C7C0; /* Color texto fijo (Home) */
}
#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
Luego editamos un gadget de HTML y en su interior añadimos lo siguiente:
<div id='navigation'>
<ul>
<li class='selected'><a href='#'>HOME</a></li>
<li><a href='#'>Enlace-1</a></li>
<li><a href='#'>Enlace-2</a></li>
<li><a href='#'>Enlace-3</a></li>
<li><a href='#'>Enlace-4lt;/a></li>
</ul>
</div>
❋ El texto Home lo podemos sustituir por cualquier otro, Inicio, Página principal... es el texto que enlazará la url de nuestro blog, la copiaremos de la barra del navegador y la pegaremos sustituyendo la almohadilla #
❋ Lo mismo haremos con el resto de enlaces, sustituimos la almohadilla por la url que vamos a enlazar. En Enlace-1, 2, 3, 4 añadimos el texto asociado con cada enlace.
Tal cual como decís, es muy fino. Me encantó. Besos!
Hay un post de JMiur donde me uni a las celebraciones por tu segura victoria el 8, pero igual aqui, en casa, te dejo mi abrazo y mi corazon por tu triunfo... merecido, justo, aunque anticipado, creo q ya un echo, felicitaciones.
Hola Gem@
Tengo una consulta. Sabes necesito una plantilla en blanco es decir que no tenga cabecera ni sidebar ni la parte de los post...pero que tenga lo esencial no se si me dejo entender.
Me dijeron que podría ser una plantilla de Zona Cerebral, se llama Framework, pero busqué la página de Zona Cerebral y creo que ya no está disponible.
No sé si sepas dónde puedo conseguir una plantilla como quiero o si tienes quizás podrías pasármela vía correo.
Espero puedas ayudarme
Por cierto me enteré por el blog de Vagabundia que eres la ganadora de la Blogoteca (aunque aún falta el anuncio oficial).
Mis felicitaciones y éxitos!!!
Buenas noches Gem@.
Y, MUCHICHISISIMAS FELICIDADES !!, estube viendo el post de JMiur en Vagabundia y me sumo a lo ya dicho, pero no te libraràs de que te vuelva a felicitar en su momento oficial.
Desde aquí un beso virtual, pero con mucho cariño y muchas gracias por todo.
Muchas gracias por el post y muchas felicidades por el premio.
Que lo disfrutes.....
Buenas noches Gemma
Hace poco que sigo tu blog y me parece fantastico el trabajo que haces .Hace muy poquito que me decidi a crear un blog no por placer sino más bien por necesidad ya que creo que es una herramienta muy buena para la comunicación y es algo muy necesario para la asociación donde estoy . He intentado hacer cosillas que tu has publicado y algunas no las he sabido hacer funcionar pero ésta , particularmente , me parece genialmente sencilla y en cuanto tenga un momentín la intentaré poner en practica pero solo tengo una duda . ¿en cada fondo de cada enlace (enlace-1, enlace-2,etc) se podría poner una pequeña imagen o dibujo? Busco algo sencillo pero bonito y si se pudiera hacer estaría muy bien .
Muchas gracias y felicidades ya que parece que ya eres ganadora, no?
background-color:#000000; /* color de fondo */
y en su lugar añadir:
background:#fff url(aquí-url-imagen) repeat ;
En #fff será el color que se mostrará cuando la imagen no cubra el espacio o no se cargue
gracias por el aporte gem@, un saludo.
hola gema como estas?
el menu es tranparente no tiene color de fondo y cuando pongo el cursor sobre el se pone negro
podrias ayudarme?
ya de verdad no se que hacer con la barra de menu pq sigo tus pasos pero me sigue igual
este es el enlace de mi blog http://angeleyes-gene.blogspot.com/
ayudame xfis!!
Lo puedes solucionar en:
.barrademenu li a:hover {
color: #ffffff;
background: #000000;
outline: none;
}
Donde dice background: #000000; cambia a background: transparent;
jajaja oks
listo ya se le quito lo negro
D
y para ponerle un color de fondo? como rojo gris o algo asi y disculpa tanta molestia
.barrademenu {
margin: 0;
padding: 0;
float: left; width: 100%;
font-family: Tahoma;
font-size:13px;
font-weight: bold;
margin-top: 0px;
border-bottom: 2px solid black;
border-top: 2px solid black;
background: #990000;
}
nopo nanais nada
ese codigo ya yo lo habia puesto y los quite y lo volvi a copiar para ver pero nada no le aparece ningun color u.u
.tabs-inner .PageList, .tabs-inner .LinkList, .tabs-inner .Labels {
margin-left: -11px;
margin-right: -11px;
background-color: transparent;
border-top: 0 solid #ffffff;
border-bottom: 0 solid #ffffff;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .3);
box-shadow: 0 0 0 rgba(0, 0, 0, .3);
}
En background-color: transparent; deberás añadir un color para el fondo y luego verás que otra vez se ocultan las letras al psar el cursor, puedes arreglarlo en:
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000;
}
gracias!!!!!!!!! eres un sol!
ya lo pude hacer!!!
jajajaj tengo todo el dia partiendome el coco con eso
muchas gracias
Que es mejor, este tipo de menu o las paginas de Blogger?
Hola Gema!! felicitaciones por tu premio, y gracias a 20 minutos porque gracias a dicho periodico he tenido la oportunidad de conocerte.
Quiero hacer mi propio blog, pero estoy perdidisma....
Me he ido a blogger, hice mi primera pagina, pero cuando lo busco en google no aparece...
Que debo hacer?
besos guapa
http://www.google.es/addurl/
hola gem@ como stas? jaja queria decirte como le cambio el color al menu? es que cuando le cambio el color desde el diseñador de plantillas de blogger se cambia al rededor yo quiero que se cambie tdo osea el color de dentro!!! ayuda!!! rescatame jee
jee quiero el mismo que tiene el ejemplo y sale distinto!!!
Simplemente sigue los pasos de la entrada y en el código verás que a la derecha viene información para personalizar los colores del menú.
Por ejemplo para el color de fondo dice:
background-color:#000000; /* color de fondo */
Gracias ya me gusta como me quedo mira entra!!
http://blogdelossimpsons2009.blogspot.com/
ahh y orta cosa como ago para centralizar la imagen de arriva del blog?... gracias por la ayuda sos lo mas (Y)
olaz gema
buen post
pero quiero preguntarte como hago para
poner una entrada en cada diferente submenu
por ejemplo como ago para poner una entrada en el enlace 2 sin que salga en el enlace 1
Hola, Gema. He utilizado este menú con fondo negro, y el fondo de mi blog es blanco. Me gustaría que no quedasen espacios entre las pestañas del menú, o que dichos espacios se rellasen de negro.
Por cierto, te dejo un ejemplo de a lo que me refería cuando te hablé del efecto para las fotos en la entrada "Prioritarios en Gmail". Este es el ejemplo: http://vegamusic.es
Me gustaría que el menú quedase parecido al del blog de Vega y que las cuatro miniaturas de las fotos que abren ese efecto fuesen aleatorias y, en el caso de que no se pudiese, ¿cómo podría comentar las fotos, como aparecen en ese blog? Ahora mismo, sólo me permite ponerles un título con unos carácteres limitados.
Te dejo también el enlace de mi blog, para que le eches un ojo!
Gracias.
¡Un saludo!
El enlace de mi blog es: http://cosasquenosedebencontar.blogspot.com
#navigation {
margin-left: 21px;
top: 25px;
background:#000000;
}
Si lo que deseas es que el efecto presente las esquinas superiores redondeadas puedes mirar esta entrada:
http://gemablog-.blogspot.com/2009/09/border-radius.html
Sería cuestión de añadir en la parte del efecto hover lo siguiente:
#navigation a:hover {
border-bottom:3px solid #05C7C0; /* Linea inferior al pasar el cursor (hover) */
color:#05C7C0; /* Color al pasar el cursor (hover) */
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft: 5px;
}
El tema de las miniaturas mostradas con ventana modal no entiendo a lo que te refieres con "comentar" ¿el texto que hay sobre las fotos? eso está creado con anterioridad quiero decir que se añadió con algún editor de imágenes antes de subir la foto.
Todo lo relacionado con la ventana está relacionado con el script que lo hace trabajar, nosé si hay alguna forma de modificarlo
Gracias, Gema. He probado lo del fondo, pero no funciona. Lo que quiero exactamente es que no queden espacios entre las distintas pestañas, que el menú se quede como una franja unificada. ¿Cómo podría modificar el espacio entre las pestañas para que desaparezca?
Lo del borde redondo tampoco ha funcionado.
Con lo de las miniaturas me refería al texto que aparece debajo de las fotos al pinchar en ellas. ¿Cómo podría poner textos debajo de las fotos? En la web de Vega, son textos se pueden seleccionar, copiar y pegar, por lo que no pertenece a la propia imagen, no? No sé si me he explicado bien...
¡Qué pesao soy, che! jaja
En la parte que dice:
#navigation a {
background-color:#000000; /* color de fondo */
border-bottom:3px solid #FFFFFF; /* Línea inferior *
color:#FFFFFF; /* Color de texto */
display:inline-block;
font-size:13px; /* Tamaño de fuente */
font-weight:normal;
margin-right:1px;
padding:10px 20px 10px; /* Anchura y altura de las pestañas */
text-decoration:none;
text-transform:uppercase; /* Letra mayúscula */
text-shadow:0 1px 1px #CDCDCD ;/* Sombra texto */
}
Cambia margin-right:1px; a margin-right:0px;
Sobre las miniaturas y los textos no veo tales textos sino una paginación, muestra la cantidad de fotografías que se pueden visualizar, si mostrara una sola imagen con la posibilidad de enlazar más de una se mostraría una paginación con la opción de ir pasando las fotos.
He cambiado la parte de margin-right a 0px, como me has dicho pero sólo ha servido para que se juntara un poco más (como el menú de ejemplo que tienes tú puesto en esta entrada), pero no llega a quedar unido del todo, sigue viéndose un pequeño espacio entre las pestañas.
Lo de los textos, quizás no los veas porque las cuatro miniaturas de fotos que se muestran en la página principal del blog de Vega, son aleatorias y muchas de las fotos no llevan texto.
Te paso la página de las fotos del blog, pincha en las miniaturas de las de USA o de las Buenos Aires. Ahí podrás ver claramente a lo que me refiero: http://www.vegamusic.es/wordpress/?page_id=40
Lo del texto de las miniaturas lo he visto y no, eso no se puede hacer con Shadowbox que creo que es la que estás usando, con esa puedes añadir el texto arriba.
Lo acabo de probar y tenías razón. He puesto el menú en otra parte del blog y he cambiado la parte de margin-right y el espacio entre las pestañas ha desaparecido. Pero claro, yo quiero que el menú se muestre donde lo tengo ahora mismo puesto. Uso el diseñador de plantillas de Blogger, ¿tiene eso algo que ver? ¿Cómo podría solucionarlo?
En cuanto a lo de las fotos, sí estoy usando Shadowbow y me permite poner un texto arriba de las imágenes, pero tiene que ser un título (corto), porque si el texto se alarga demasiado no lo muestra entero. ¿Cómo podría conseguir el mismo efecto que tiene Vega, con texto incluído?
Y por cierto, me acabo de enterar de que te llamas Julia, perdón por llamarte todo el rato Gema, jaja
El problema del menú te comentaba que me daba la sensación de ser alguna imagen de fondo que estabas utilizando por eso en la prueba no surge ese problema.No sé cómo puede solucionarse al estar usando el diseñador.
Y en efecto el espacio para la ventana modal es para un título no da para una frase quizás en los estilos de la ventana modal pueda modificarse y darle más anchura a ese espacio pero nunca como para añadir un párrafo tal y como en ese blog de Vera
Hola Gema! Instalé este menú pero tengo un problema: toma como color de las letras de las pestañas (excepto la primera) como el color de los links del blog, me explico? No importa que lo cambie, sigue tomando los otros! No se como hacer
Podría cambiar todos los links al color ese, pero en el footer los necesito negros. Este es el blog mirá: http://nfesiyrejktdf.blogspot.com/
Muchas gracias!
Que lindo nombre Julia por cierto
color: #ff0000 !important;
Hola Julia, habría alguna forma de que el efecto que se queda fijo en la pestaña Home, se aplicara a cualquier pestaña según estás en las distintas páginas del blog. Es decir que cuando navegas por las distintas páginas del blog, aparezca marcada la pestaña de la página en la que te encuentras. Como en www.vegamusic.es
#navigation a:active{
border-bottom:3px solid #05C7C0;
color:#05C7C0;
}
No, Julia. Eso sólo funciona al pinchar en la pestaña, pero no se mantiene el estilo una vez que estás en la página.
¿Se te ocurre alguna manera?
No lo he conseguido. Pero bueno, tampoco es tan importante. ¿Qué partes del código y cómo tendría que modificarlas para que el subrayado del menú fuese un poco más ancho y estuviese arriba en lugar de abajo e incorporar una flecha debajo del texto? Es decir, igual que en este blog www.vegamusic.es
Te envío mi plantilla por email para que si puedes le eches un vistazo porque yo lo intenté pero no quedaba bien.
El tema de la flecha ya no puedo indicarte porque no sé como lo hicieron
Nota: solo los miembros de este blog pueden publicar comentarios.